<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人网站</title>
  <!-- 公共样式文件 -->
  <link rel="stylesheet" href="./css/style.css">
  <!-- 主样式文件 -->
  <link rel="stylesheet" href="./css/blog-single.css">
</head>

<body>
  <!-- ======= Header ======= -->
  <header id="header"></header><!-- End Header -->

  <!-- ======= main ======= -->
  <main>
    <!---------------------- 主图 ------------->
    <section id="main-img"></section>

    <!----------------------- 文章内容 ------------->
    <section id="article">
      <!-- <h1 id="title" class="box">标题</h1>
      <div id="content">
        <div>
          内容
        </div>
        <img src="" alt="">
        <div>
          内容
        </div>
      </div> -->
      <!-- share -->
      <div id="extra" class="flex box wrap">
        <div id="tags" class="flex">
          <p>标签</p>
          <div class="tag bright-blue">Travel</div>
          <div class="tag pink">December</div>
          <div class="tag green">Adventure</div>
          <div class="tag orange">Fun</div>
        </div>
        <div id="share" class="flex">
          <p>分享到</p>
          <a href="#"><img src="./images/share-logo/flash.png" alt=""></a>
          <a href="#"><img src="./images/share-logo/Twitter.png" alt=""></a>
          <a href="#"><img src="./images/share-logo/Pinterest.png" alt=""></a>
          <a href="#"><img src="./images/share-logo/flash.png" alt=""></a>
        </div>
    </section><!-- ======= end article======= -->

    <!-- ======= comment ======= -->
    <section id="comment-box">
      <!-- -----------------留言列表 --------------->
      <div id="comments">
        <!--插入留言-->
        <!-- <div class="comment">
          <h4>
            <span></span>
            <span class="date">34567</span>
          </h4>
          <p></p>
        </div> -->
      </div>
      <p>
        <button id="btn-get" class="btn green">查看所有评论</button>
      </p>



      <!----------------------- 留言板 -------------->
      <div id="comment-form">
        <h4 id="remark">评论</h4>
        <p class="flex wrap info">
          <input type="text" id="nickname" placeholder="称呼">
          <input type="text" id="email" placeholder="Email">
        </p>
        <p>
          <textarea placeholder="请输入留言" name="" id="message-content" cols="30" rows="10"></textarea>
        </p>
        <p>
          <button id="btn-post" class="btn c-blue">发布</button>
        </p>
      </div>
    </section><!-- ======= end comment ======= -->
  </main><!-- ======= end main ======= -->





  <!-- ======= Footer ======= -->
  <footer>© Copyright tiro. All Rights Reserved </footer><!-- End Footer -->





  <!-- 公共JS文件 -->
  <script src="./js/main.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="./js/blog-single.js"></script>
</body>

</html>